﻿@{
    ViewBag.Title = "EventDelegate";
    Layout = "~/Views/Shared/_Page.cshtml";
}

<style>
    .listHover {
        cursor: pointer;
        font-weight: bold;
        color: #008000;
    }
</style>

<h2>Event Delegate</h2>

<div class="content">
	<div class="main">
        <form action="#" method="get">
	        <p>
                <input name="textfield" type="text" id="textfield" class="inputbox" /> 
                <input name="button" type="button" id="button" value="Add Task" />
	        </p>
	    </form>
	    <h1>To Do List</h1>
	    <ul id="tasklist">
	    </ul>
	</div>
</div>

<script type="text/javascript">
    $(document).ready(function () {
        $('form').submit(function (evt) {
            evt.preventDefault();
        });

        $('#button').click(function () {
            var $field = $('#textfield')
            var fieldVal = $field.val();
            if (fieldVal) {
                $('#tasklist').append('<li>' + fieldVal + '</li>');
                $field.val('');
                $field.focus();
            }
        });

        $('#tasklist').on('click', 'li', function () {
            ZEUS.DEBUG.log($(this).html() + ' removed');
            $(this).css({
                'text-decoration': 'line-through',
                'font-weight': 'bold',
                'color': '#ff0000'
            });
        });

        $('#tasklist').on('mouseover', 'li',
            function () {
                $(this).addClass('listHover')
            }
        );
        $('#tasklist').on('mouseout', 'li',
            function () {
                $(this).removeClass('listHover')
            }
        );
    });
</script>
